<template>
    <div class="addressmanage">
      <div class="addressbox" ref="box" >
      <div class="addresslist" v-for="(item,index) in addresslist" :key="index" ref="addresslist" v-if="addresslist.length!=0">
        <div class="click"  @click="adlist(item)">
          <div class="clickcon">
             <p class="phone">
              <span class="contact">{{item.contact}}</span>
              <span>{{item.phone}}</span>
           </p>
            <p class="border">{{item.address}}</p>
          </div>
          <div class="clickb">
              <img src="./.././../assets/icon_click.png@2x.png" alt="">
          </div>
        </div>
         <div class="icon">
            <p v-if="item.isDefault==1"><img src="../../assets/addressadministration_icon_check_normal.png@2x.png" alt="">默认地址</p>
            <p v-if="item.isDefault==0" class="select"><img src="../../assets/addressadministration_icon_check_selected.png@2x.png" alt="">默认地址</p>
            <p>
              <span class="m" @click="addersseditor(item)"><img src="../../assets/addressadministration_icon_compile.png@2x.png" alt="" class="imgb">编辑</span>
              <span @click="deleteadress(item)"><img src="../../assets/addressadministration_icon_delete.png@2x.png" alt="" class="imgb">删除</span>
            </p>
        </div>
      </div>
     <div class="buttonbox fixed" ref="buttonbox" @click="addressvue">
        添加新地址
      </div>
      <div style="width:100%;height:50px"></div>
      </div>
       <div class="nodata" v-if="addresslist.length==0">暂无数据</div>
    </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
import {getAddressList,deleteAddressById} from "src/methods/request.js";
export default {
  data() {
    return {
      route:{},
      addresslist:[]
    };
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      // from.name == "userSetting" && vm.getAddress();
    });
  },
   created(){
      this.route = Object.assign({}, this.$route);
      this.$store.commit('increment',"管理收货地址");
      this.getaddress();
  },
  mounted(){

  },
  methods:{
    adlist(item){
       this.$router.push({
          path:"/goodsResult",
          query:{
              id:item.id,
              adsnum:this.route.query.num
          }
      })
    },
    addressvue(){
      this.$router.push({
          path:"/Address",
          query:{}
      })
    },
    //获取
    getaddress(){
      getAddressList({}).then(
               response => {
             this.addresslist = Object.assign([], response.data.addressList)
              if(this.addresslist.length>3){
                this.$refs.buttonbox.setAttribute("class","buttonbox")
              }else{
                this.$refs.buttonbox.setAttribute("class","buttonbox fixed")
              }
              }
            ).catch(
              error => console.log(error)
            );
    },
   // 删除
   deleteadress(item){
      var self= this;
      MessageBox.confirm(
        "",
        {
            message: "确定删除？",
        }
      ).then(action => {
           if (action == 'confirm') {
              //点击确认删除
           deleteAddressById({id:item.id}).then(
               response => {
                console.log()
                if(response.rspCode=="0000"){
                    this.getaddress();
                }else{
                   MessageBox('', '删除失败');
                }

              }
            ).catch(
              error => console.log(error)
            );
           }
      });
   },
   //编辑
   addersseditor(item){
     this.$router.push({
          path:"/Addresseditor",
          query:{
            id:item.id
          }
      })
   }
  },
   watch:{
    'route' () {
      if(this.route.path=="/AddressManage"){
        this.getaddress();
      }
     }
  },
}
</script>
<style lang="less" scoped>
.addressmanage {
    font-size: 17px;
    position: fixed;
    top: 46px;
    width: 100%;
    height: 100%;
    background-color:#f1f2f3;
    overflow-x: auto;
    font-size: 16px;
    .addresslist{
      margin-bottom: 15px;
      background-color: #fff;
      padding:0 15px 0 15px;
      box-sizing: border-box;
      .click{
        position: relative;
        overflow: hidden;
        height: 100%;
        .clickcon{
         float: left;
         width: 85%;
        //  min-height:80px;
            p{
                text-align: left;
              }
              .phone{
                    margin-top: 10px;
                    height:40px;
                    line-height:40px;
                  .contact{
                      display: inline-block;
                      width: 100px;
                    }
                }
                .border{
                  padding-bottom: 10px;
                  line-height: 22px;
                  border-bottom: 1px solid #f1f0f0;
                  word-break: break-all;
                }
          }
          .clickb{
             float: left;
             display:flex;
             justify-content:center;
             width: 15%;
              img{
                width: 12px;
                height:24px;
                margin-top: -12px;
                position: absolute;
                top:50%;
              }
          }

         }
       .icon{
           display:flex;
           justify-content: space-between;
           align-items: center;
           font-size: 13px;
          img{
            margin-right: 6px;
          }
        P:nth-child(1){
          img{
            margin-top: 1px;
            width:18px;
          }
        }
         P:nth-child(2){
          span{
            margin-left: 15px;
          }
          img{
            margin-bottom: -4px;
            width:15px;
          }
        }
         p{
           display:flex;
           align-items: center;
           img{
             width:18px;
           }
           height:50px;
         }
       }

    }

     .buttonbox {
        margin-top: 20px;
        margin-left: 4.5%;
        width: 91%;
        color: #fff;
        height: 40px;
        background-color: #ED6E36;
        line-height: 40px;
        border-radius: 5px;
        text-align: center;
    }
    .fixed {
        position: fixed;
        bottom: 30px;
        left: 0px;
    }
}

.MoneyResult::-webkit-scrollbar {
    display: none;
}

</style>

